<template>
	<view>
		<view class="item-info-cls">
			<view class="left-cls">
				<view class="opt-cls">[选项{{detailObj.voteOption}}]</view>
				<uni-tooltip :content="detailObj?.name">
					<view class="name-cls ellipsis">{{detailObj?.name}}</view>
				</uni-tooltip>
			</view>
			<view class="right-cls">
				[共{{detailObj.number}}票]
			</view>
		</view>
		<mescroll-body @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
			<view class="news-li" v-for="user in dataList" :key="user.id">
				<view class="item-left-cls">
					<!-- <image class="my_img" :src="`${BASE_URL}/image/userAvatar/${user?.avatarUrl}`" ></image> -->
					<uni-file-picker v-model="user.avatarArray" :sourceType="sourceType" fileMediatype="image" mode="grid"
						:image-styles="itemStyles" :readonly="true" :limit="1" return-type="object" />
				</view>
				<view class="item-right-cls">
					<view class="name-cls">{{user.nickName}}</view>
					<view class="time-cls">投票时间：{{user?.tvoteDetail?.voteDate}}</view>
				</view>
			</view>
		</mescroll-body>
	</view>
	

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onPageScroll,
		onReachBottom,
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import {
		getUserListByItemId,
		getItemDetail
	} from '@/api/vote.js'
	import {
		compareDateTime
	} from '@/utils/index.js'
	import {
		useRouter
	} from '@/utils/index.js'
	import {BASE_URL} from '@/config/index.js'

	const dataList = ref([]) // 数据列表
	const itemId = ref('')
	const vId=ref('')
	const detailObj=ref({})
	const index=ref('')
	const {
		mescrollInit
	} = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
	const downOption = {
		auto: false //是否在初始化后,自动执行downCallback; 默认true
	}
	const itemStyles=ref({
		width:80,
		height:80
	})
	const sourceType = ref(['album', 'camera'])
	onLoad(options => {
		console.log('options', options)
		itemId.value = options.itemId
		vId.value=options.vId
		index.value=options.index
		initDataDetail(options.itemId)
	})
	const initDataDetail =async (itemId)=>{
		const res=await getItemDetail(itemId)
		detailObj.value=res.objData
	}
	/* 自定义下拉刷新的回调,不使用useMescroll的downCallback */
	const downCallback = (mescroll) => {
		mescroll.setPageNum(1);
		mescroll.setPageSize(10);
		let pageSize = mescroll.size;
		getUserListByItemId(vId.value,itemId.value, 1,
			pageSize).then(data => {
			mescroll.endSuccess();
			data.list.map(t=>{
				let _imageItemName = t.avatarUrl
				const _itemImageUrl = `${BASE_URL}/image/userAvatar/${_imageItemName}` 
				t.avatarArray=[{
					name: _imageItemName,
					url: _itemImageUrl,
					extname: _imageItemName.split('.')[1]
				}]
				return t;
			})
			dataList.value = data.list
		}).catch(() => {
			mescroll.endErr();
		})
	}

	/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
	const upCallback = (mescroll) => {
		let pageNum = mescroll.num == 0 ? 1 : mescroll.num; // 页码, 默认从1开始
		let pageSize = mescroll.size;
		if (mescroll.num == 1) dataList.value = []; //如果是第一页需手动置空列表
		getUserListByItemId(vId.value,itemId.value,pageNum,
			pageSize).then(curPageData => {
				curPageData.list.map(t=>{
					let _imageItemName = t.avatarUrl
					const _itemImageUrl = `${BASE_URL}/image/userAvatar/${_imageItemName}` 
					t.avatarArray=[{
						name: _imageItemName,
						url: _itemImageUrl,
						extname: _imageItemName.split('.')[1]
					}]
					return t;
				})
			dataList.value = dataList.value.concat(curPageData.list); // 追加数据
			mescroll.endBySize(curPageData.list.length, curPageData.total); // 请求成功, 结束加载
		}).catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}
</script>

<style scoped lang="less">
	.item-info-cls{
		display: flex;
		height: 100rpx;
		justify-content: space-between;
		align-items: center;
		padding:30rpx 30rpx 0;
		color: green;
		.left-cls{
			display: flex;
			width:calc(100% - 130rpx);
			.opt-cls{
				width:120rpx;
			}
			.name-cls{
				color:#75aeed;
			}
		}
	}
	.news-li {
		margin: 40rpx;
		background-color: #fff;
		height: 180rpx;
		padding:0 30rpx;
		box-sizing: border-box;
		border-radius: 10px;
		display: flex;
		align-items: center;
		.item-left-cls{
			width:160rpx;
			margin-right: 30rpx;
		}
		.item-right-cls{
			width:calc(100% - 130rpx);
			.time-cls{
				margin-top: 15rpx;
			}
		}
	}
</style>